<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微场景</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
	<script src="js.js"></script>
	<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css.css">
</head>
<body>
	<div id="box">
		<article>
			<a href="javascript:;">
				<img src="image/1.jpg" alt="">
				<span class="span span1">九幽阴灵，诸天神魔，以我血躯，奉为牺牲。三生七世，永堕阎罗，只为情故，虽死不悔</span>
			</a>
			<a href="javascript:;">
				<img src="image/2.jpg" alt="">
				<span class="span">卐</span>
			</a>
			<a href="javascript:;">
				<img src="image/3.jpg" alt="">
				<span class="span">奔波之后，有谁可以，抚我之面，消我半世悲苦？有谁可以，携我之心，融我半世冰霜？</span>
			</a>
			<a href="javascript:;">
				<img src="image/4.jpg" alt="">
				<span class="span">阴阳动静在人天，皇极中空炼万年；看破浮生早悟空，明灯不昧照三千！</span>
			</a>
		</article>
		 <audio id="audio" hidden src="./1.mp3" controls=controls loop="loop" autoplay="autoplay"></audio>
		<div id="mp3">
			<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
		</div>
	</div>
	<script>
		$("#mp3").on("touchstart",function(){
			//控制音乐的播放与暂停
			if($("#audio")[0].paused){
				$(this).removeClass('stop');
				$("#audio")[0].play();
			}else{
				$(this).addClass('stop');
				$("#audio")[0].pause();
			}
		})
	</script>
</body>
</html>














